import styles from '../css/goods.css'
import { Breadcrumb, Card, Table, Space, Button, Modal, Upload, message, Form, Input, Row, Col, Pagination, Select } from 'antd';
import React, { useEffect, useState } from 'react';
import Server from '../unite/request'
import { UploadOutlined } from '@ant-design/icons';


export default function () {

    const [isModalVisible, setIsModalVisible] = useState(false);
    const [addisModalVisible, setaddIsModalVisible] = useState(false);

    const [table, settable] = useState([])
    const [pagenum, setpagenum] = useState(1)
    const [pagesize, setpagesize] = useState(5)
    const [query, setquery] = useState('')
    const [total, settotal] = useState()
    const [e] = useState({})
    const [goods_name, setname] = useState('')
    const [goods_price, setprice] = useState('')
    const [goods_weight, setweight] = useState('')
    const [goods_number, setnumber] = useState('')
    const [goods_id, setid] = useState('')
    const [columns] = useState([
        {
            title: '商品名称',
            dataIndex: 'goods_name',
            key: 'goods_name',

        },
        {
            title: '商品价格',
            dataIndex: 'goods_price',
            key: 'goods_price',
        },
        {
            title: '商品数量',
            dataIndex: 'goods_number',
            key: 'goods_number',
        },
        {
            title: '商品重量',
            dataIndex: 'goods_weight',
            key: 'goods_weight',
        },
        {
            title: '操作',
            key: '操作',
            render: (row, record) => (
                <Space size="middle">
                    <Button type="primary" danger onClick={() => removeItem(row, record.id)}>删除</Button>
                    <Button type="primary" onClick={() => showModal(row, record.id)}>修改</Button>
                </Space>
            ),
        },
    ])


    const props = {
        name: 'file',
        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        headers: {
            authorization: 'authorization-text',
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };

    // 弹出框
    const showModal = (e, q) => {
        console.log(e, q);
        setname(e.goods_name)
        setprice(e.goods_price)
        setweight(e.goods_weight)
        setnumber(e.goods_number)
        setid(e.goods_id)
        setIsModalVisible(true);
    };


    // 添加


    const addtable = () => {

    }
    const addhandleOk = async () => {
        console.log(e);
        const re = await Server.post('goods', {
            goods_name: goods_name,
            goods_price: goods_price,
            goods_number: goods_number,
            goods_weight: goods_weight,
        })
        console.log(re, '添加一条商品');
        gettable()
        setaddIsModalVisible(false);
    };

    const addhandleCancel = () => {
        setaddIsModalVisible(false);
    };
    // 表单 
    const addonFinish = (values) => {
        console.log('Success:', values);
    };

    const addonFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    // 修改
    const handleOk = async () => {
        console.log(e);
        const re = await Server.put(`goods/${goods_id}`, {
            goods_name: goods_name,
            goods_price: goods_price,
            goods_number: goods_number,
            goods_weight: goods_weight,
        })
        console.log(re);
        gettable()
        setIsModalVisible(false);
    };
    // 关闭修改框
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    // 表单 
    const onFinish = (values) => {
        console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const removeItem = async (row, key) => {
        console.log(row, key)
        let res = await Server.delete('goods/' + row.goods_id)
        Modal.confirm({
            title: '删除内容',
            content: `你忍心删除${row.goods_name}吗？`,
            onOk: () => {
                settable(table.filter(item => item.goods_id !== key))
                message.success('删除成功!')
                gettable()
            }
        })
    }

    const gettable = async () => {
        console.log(pagesize);
        const re = await Server.get(`goods?query=${query}&pagenum=${pagenum}&pagesize=${pagesize}`)
        console.log(re.data);
        settable(re.data.goods)
        settotal(re.data.total)
    }
    useEffect(() => {

        gettable()
    }, [])
    const onChange = (e) => {
        setpagenum(e)
        gettable()
    }

    return (
        <div className={styles.container} style={{ height: '100%', overflowY: 'scroll' }}>
            <Breadcrumb>
                <Breadcrumb.Item>首页</Breadcrumb.Item>
                <Breadcrumb.Item>
                    <a href="">商品管理</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                    <a href="">商品列表</a>
                </Breadcrumb.Item>
            </Breadcrumb>
            <Card bordered={false}>
                <Row gutter={8}>
                    <Col span={5}>
                        <Input defaultValue="请输入内容" value={query} onChange={(e) => { setquery(e.target.value) }} />

                    </Col>
                    <Col span={1.5} ><Button onClick={() => gettable()}>搜索</Button></Col>
                    <Col span={2}>
                        <Button type="primary" onClick={() => addtable()}>添加</Button>
                    </Col>
                </Row>
                <Table columns={columns} dataSource={table} pagination={false} />
                <Pagination showTotal={total => `共 ${total} 数据`} onChange={onChange} defaultCurrent={pagenum}
                    current={pagenum}
                    total={total}
                    pageSize={pagesize}
                />
                {/* 修改 */}
                <Modal title="修改商品" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 4,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="商品名称"
                            name="goods_name"
                        >
                            <Input defaultValue={goods_name} onChange={(e) => { setname(e.target.value) }} />
                        </Form.Item>

                        <Form.Item
                            label="商品价格"
                            name="goods_price">
                            <Input defaultValue={goods_price} value={goods_price} onChange={(e) => { setprice(e.target.value) }} />
                        </Form.Item>
                        <Form.Item name='goods_number' label="商品数量">
                            <Input defaultValue={goods_number} value={goods_number} onChange={(e) => { setnumber(e.target.value) }} />
                        </Form.Item>
                        <Form.Item name='goods_weight' label="商品重量" >
                            <Input defaultValue={goods_weight} value={goods_weight} onChange={(e) => { setweight(e.target.value) }} />
                        </Form.Item>
                    </Form>
                </Modal>
                {/* 添加 */}
                <Modal title="添加商品" visible={addisModalVisible} onOk={addhandleOk} onCancel={addhandleCancel}>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 4,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={addonFinish}
                        onFinishFailed={addonFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="商品名称"
                            name="goods_name"
                            rules={[{ required: true, message: 'Please input your goods_name!' }]}
                        >
                            <Input value={goods_name} onChange={(e) => { setname(e.target.value) }} />
                        </Form.Item>

                        <Form.Item
                            label="商品价格"
                            name="goods_price"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your goods_price!',
                                },
                            ]}
                        >
                            <Input value={goods_price} onChange={(e) => { setprice(e.target.value) }} />
                        </Form.Item>
                        <Form.Item
                            name='goods_number'
                            label="商品数量"
                            rules={[{
                                required: true,
                                message: 'Please input your goods_number!',
                            },]}>
                            <Input value={goods_number} onChange={(e) => { setnumber(e.target.value) }} />
                        </Form.Item>
                        <Form.Item
                            name='goods_weight'
                            label="商品重量"
                            rules={[{
                                required: true,
                                message: 'Please input your goods_number!',
                            },]}>
                            <Input value={goods_weight} onChange={(e) => { setweight(e.target.value) }} />
                        </Form.Item>

                       


                    </Form>
                </Modal>
            </Card>

        </div>
    );
}
